<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
	<title>秀图详情</title>
	<link rel="stylesheet" href="../css/mui.min.css"/>
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../iconfont/iconfont.css" />
	<link rel="stylesheet" href="../css/app.previewimage.css" />
	<style>
		.xiu-info {
			border-bottom: 1px solid #DCDCDC;
		}
		.xiu-title {
			margin-left: 10px;
			border-bottom: 1px solid #DCDCDC;
		}
		.show-title {
			margin-bottom: 5px;
		}
		.icon-down, .icon-pinglun {
			font-size: 14px;
		}
		.icon-down:before, .icon-pinglun:before {
			font-size: 16px;
		}
		.xiu-pinglun > div {
			margin-left: 10px;
			padding-top: 14px;
			border-bottom: 1px solid #DCDCDC;
		}
		.xiu-pinglun a {
			color: #6BCFF7;
		}
		.xiu-pinglun time {
			font-size:12px;
			line-height: 12px;
			display: block;
			padding-bottom: 2px;
		}
		.xiu-submit {
			position: fixed;
			bottom: 0;
			width: 100%;
			box-shadow: -2px 0 2px #DCDCDC;
		}
		.xiu-submit button {
			margin-top: 5px;
		    padding-top: 3px;
		    padding-bottom: 3px;
		    color: #fff;
		    background: #FC3A2E;
		    border-color: #CCCCCC;
		}
		.xiu-submit input[type=text] {
			padding-top: 0px;
			padding-bottom: 0px;
			padding-left: 5px;
			height: 30px;
			background: #F7F7F8;
		}
		.mgn-b-sm {
			margin-bottom: 5px;
		}
		.mui-slider .mui-slider-item {
			text-align: center;
		}
		.xiu-info .mui-slider img {
			max-width: 100%;
			max-height: 150px !important;
			
			margin-left: auto;
			margin-right: auto;
		}
	</style>
</head>
<body>
	<!--商品 开始-->
	<div class="mui-content mui-scroll-wrapper container-pull-refresh">
		<div class="mui-scroll">
			<!--数据列表-->
			<section class="mui-table-view scroll-data" data-tpl="tpl-template">
				<!--秀图详情 开始-->
				<div class="white xiu-info">
					<div class="mui-slider">
						<div class="mui-slider-group mui-slider-loop">
							<div class="mui-slider-item">
								<img class="mui-col-xs-12" src="../image/icon-no-image.png" data-preview-src="" data-preview-group="1" />
							</div>
						</div>
					</div>
					<div class="xiu-title pad-v">
						<label class="show-title">&nbsp;</label>
						<div class="mui-text-right">
							<button class="pad-h-sm no-pad-v text-gray btn-awesome"><i class="iconfont icon-down"> 0</i></button>
							<button class="pad-h-sm no-pad-v text-gray mgn-h btn-comment"><i class="iconfont icon-pinglun"> 0</i></button>
						</div>
					</div>
					<div class="pad-v pad-h text-gray show-text">&nbsp;</div>
				</div>
				<!--秀图详情 结束-->
				<div class="pad-v"></div>
				<!--绣图评论 开始-->
				<div class="white xiu-pinglun">
				</div>
				<!--绣图评论 结束-->
				<div class="pad-v-lg"></div>
			</section>
		</div>
	</div>
	<!--提交评论 开始-->
	<div class="white mui-row xiu-submit mui-text-center">
		<div class="mui-col-xs-9 pad-h-md pad-v-sm">
			<input class="no-mgn" type="text" name="message" placeholder="请输入评论内容"/>
		</div>
		<div class="mui-col-xs-3">
			<button class="no-bdr pad-v-sm btn-submit" disabled="disabled">提交</button>
		</div>
	</div>
	<!--提交评论 结束-->
	
    <!-- 轮播图 模块开始 -->
	<script type="text/template" id="tpl-slider">
        <!--支持循环，需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate">
        	<img src="{{image(images[images.length - 1])}}" class="responsive" data-preview-src="" data-preview-group="1" />
        </div>
		{{each images as item}}
		<div class="mui-slider-item">
			<img src="{{image(item)}}" class="responsive" data-preview-src="" data-preview-group="1" />
		</div>
		{{/each}}
        <!--支持循环，需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate">
        	<img src="{{image(images[0])}}" class="responsive" data-preview-src="" data-preview-group="1" />
        </div>
	</script>
    <!-- 轮播图 模块结束 -->
    
	<!-- 秀图内容模板 开始 -->
	<script type="text/template" id="tpl-template">
		{{each data as item}}
		<div class="mui-row comment">
			<div class="mui-col-xs-12">
				<a>{{item.nicname || item.username}}：</a>
				<label>{{item.content}}</label>
				<time class="mui-text-right text-gray mgn-b-sm">{{item.create_time}}</time>
			</div>
		</div>
		{{/each}}
	</script>
	<!-- 秀图内容模板 结束 -->
	
	<script type="text/javascript" src="../js/mui.min.js" ></script>
	<script type="text/javascript" src="../js/jquery.min.js" ></script>
	<script type="text/javascript" src="../js/template.js" ></script>
	<script type="text/javascript" src="../js/app.js" ></script>
	<script type="text/javascript" src="../js/mui.zoom.js" ></script>
	<script type="text/javascript" src="../js/mui.previewimage.js" ></script>
	<script type="text/javascript" src="show.detail.scroll.js" ></script>
</body>
</html>